<template>
  <div>

    <div>
      <el-descriptions border style="margin: 10px 0">
        <el-descriptions-item>
          <template slot="label">
            后台账号
          </template>
          <el-input v-model="tbAccount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            后台密码
          </template>
          <el-input v-model="tbPassword" type="password" show-password></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div>
      <el-card>
        <div slot="header">
          <span>目标设置</span>
          <div style="width: 300px;float: right;">
            <el-button style="display: inline-block;float: right;padding: 3px 0" type="text" @click="addCategory">
              添加目标
            </el-button>
            <el-input style="width:250px;display: inline-block;float: right;bottom: 30px;right: 70px"
                      v-model="category" placeholder="请输入品类"></el-input>
          </div>
        </div>
        <div style="text-align: center;margin: 10px 0" v-if="searchObjList.length > 0">
        </div>
        <el-card style="margin-bottom: 10px" v-for="(searchObj,index) in searchObjList">
          <el-descriptions :column="3">
            <template slot="title">
              <el-tooltip effect="dark" content="点击修改此品类" placement="top">
                <span style="font-size: 20px;letter-spacing: 1px" @click="updateCategory(searchObj)">
                  {{searchObj.category}}
                </span>
              </el-tooltip>
            </template>

            <template slot="extra">
              <el-tooltip effect="dark" content="数据周期(注意:账号不支持选择30天时,默认选择7天)" placement="top-start">
                <el-select
                    style="width: 100px"
                    v-model="searchObj.dateCycle"
                    placeholder="请选择数据周期"
                    size="small"
                >
                  <el-option
                      v-for="item in ['7天','30天']"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-tooltip>

              <el-popconfirm
                  style="margin-left: 10px"
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确认删除这个品类吗？"
                  @confirm="removeArrayByIndex(searchObjList,index)"
              >
                <el-button
                    slot="reference"
                    type="danger"
                    size="small"
                >
                  删除该品类
                </el-button>
              </el-popconfirm>
            </template>

          </el-descriptions>

          <div style="margin: 5px 0 10px 0">
              <el-divider content-position="left"><span class="title">1. 过滤参数</span></el-divider>
              <span class="label">最低客单价 : </span>
              <el-input-number v-model="searchObj.minPrice1" :precision="2" :step="1" :min=0 :max="100000"></el-input-number>
          </div>

          <div style="margin: 5px 0 10px 0">
            <el-divider content-position="left"><span class="title">2. 排序过滤参数</span></el-divider>
            <div style="display: flex;justify-content: space-between;">
              <div style="align-self: flex-start;">
                <span class="label">保留交易金额倒叙排名前数据(%) : </span>
                <el-input-number size="mini" v-model="searchObj.sortAmountTopR" :precision="0" :step="1" :min=1 :max="100"></el-input-number>
              </div>
              <div style="align-self: flex-end;">
                <span class="label">保留搜索人数倒叙排名前数据(%) : </span>
                <el-input-number size="small" v-model="searchObj.sortSearchPeopleTopR" :precision="0" :step="1" :min=1 :max="100"></el-input-number>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin:10px 0">
              <div style="align-self: flex-start;">
                <span class="label">
                  剔除保留行外UV价值低于 :
                </span>
                <el-input-number size="small" v-model="searchObj.sortMinUVPrice" :precision="2" :step="1" :min=0 :max="10000">
                </el-input-number>
              </div>
              <div style="align-self: flex-end;">
                <span class="label">
                  剔除保留行外客单价低于 :
                </span>
                <el-input-number size="small" v-model="searchObj.sortMinPrice" :precision="2" :step="1" :min=0 :max="10000">
                </el-input-number>
              </div>
            </div>

          </div>

          <div style="margin: 5px 0 10px 0">
            <el-divider content-position="left"><span class="title">3. 过滤参数</span></el-divider>
            <div style="margin: 0 10px">
              <div style="margin: 5px 0 10px 0">
                <el-button
                    type="warning"
                    size="small"
                    @click="addIgnoreName(searchObj)"
                >
                  添加商品标题不允许出现的字符
                </el-button>
                <el-button
                    type="success"
                    size="small"
                    @click="addContainName(searchObj)"
                >
                  添加商品标题必须包含的字符
                </el-button>
              </div>

              <div>
                <div
                    v-if="searchObj.titleNotContainStr.length > 0"
                    style="text-align: center"
                >
                  <el-divider>标题不允许出现的字符</el-divider>
                </div>

                <el-tag
                    type="warning"
                    style="margin: 0 5px 5px 0"
                    :key="tag"
                    v-for="(tag,ignoreNameIndex) in searchObj.titleNotContainStr"
                    closable
                    :disable-transitions="false"
                    @close="removeArrayByIndex(searchObj.titleNotContainStr,ignoreNameIndex)">
                  {{tag}}
                </el-tag>

              </div>

              <div>
                <div
                    v-if="searchObj.titleContainStr.length > 0"
                    style="text-align: center"
                >
                  <el-divider>标题必须包含的字符</el-divider>
                </div>

                <el-tag
                    type="success"
                    style="margin: 0 5px 5px 0"
                    :key="tag"
                    v-for="(tag,containNameIndex) in searchObj.titleContainStr"
                    closable
                    :disable-transitions="false"
                    @close="removeArrayByIndex(searchObj.titleContainStr,containNameIndex)">
                  {{tag}}
                </el-tag>
              </div>

            </div>
          </div>


        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message";

export default {
  name: "findMarketRank",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParams({...this.params})
      }
    }
  },
  created() {
    this.initParams({...this.params})
  },

  data() {
    return {
      tbAccount: '',
      tbPassword: '',
      category: '',
      searchObjList: [],
    }
  },
  methods: {
    initParams({
                 tbAccount = '', tbPassword = '',
                 searchObjList = []
               } = {}) {
      this.tbAccount = tbAccount;
      this.tbPassword = tbPassword;
      /*
      * 品类搜索对象列表
      * category(品类名称),
      * minPrice1 首次过滤最低客单价
      * sortAmountTopR 根据交易金额倒叙保留前百分之几数据
      * sortSearchPeopleTopR 根据搜索人数倒叙保留前百分之几数据
      * sortMinUVPrice 倒叙删除 UV 价值小于此数的数据
      * sortMinPrice 倒叙删除 客单价小于此数的数据
      * titleContainStr(忽略包含指定商品列表),
      * titleNotContainStr(忽略不包含指定商品列表),
      * */
      searchObjList.map(item => {
        item.minPrice1  = item.minPrice1 || 100
        item.sortAmountTopR = item.sortAmountTopR || 50
        item.sortSearchPeopleTopR = item.sortSearchPeopleTopR || 50
        item.sortMinUVPrice = item.sortMinUVPrice || 3
        item.sortMinPrice = item.sortMinPrice || 200
        item.titleContainStr = item.titleContainStr || []
        item.titleNotContainStr = item.titleNotContainStr || []
        return item
      })
      this.searchObjList = searchObjList

    },
    getParam() {
      let _t = this
      let data = {
        tbAccount: _t.tbAccount,
        tbPassword: _t.tbPassword,
        searchObjList: _t.searchObjList,
      }
      return {
        ...data
      }
    },
    checkParam() {
      let _t = this
      let err = "[ 生意参谋-获取市场排行-商品 ]"
      if (isNull(_t.tbAccount)) {
        msg.warning(err + " 请填写后台账号")
        return false;
      }
      if (isNull(_t.tbPassword)) {
        msg.warning(err + " 请填写后台密码")
        return false;
      }
      if (isNull(_t.searchObjList)) {
        msg.warning(err + " 至少添加一个目标品类")
        return false;
      }
      return true
    },
    removeArrayByIndex(arr, index) {
      console.log(arr)
      arr.splice(index, 1);
    },
    updateCategory(categorySearch) {
      this.$prompt('', '修改品类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        if (isNull(value)) {
          return
        }
        categorySearch.category = value
      }).catch((err) => {
        console.log(err)
      })
    },
    addIgnoreName(categorySearch) {
      this.$prompt('对分类  [ ' + categorySearch.category + ' ] 下的商品添加标题不允许出现的字符', '添加忽略字符', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '支持一次输入多个例如:(平底锅,炒锅)'
      }).then(({value}) => {
        if (isNull(value)) {
          return;
        }
        let newList = value.split(/[,，]/)
            .map(item => item.trim())
            .filter(item => item !== '')
        let hasIntersection = categorySearch.titleContainStr.concat(categorySearch.titleContainStr).some(old => {
          old = old.toString()
          return newList.some(newStr => newStr === old || old.includes(newStr) || newStr.includes(old))
        })
        if (hasIntersection) {
          msg.warning("新增的字符已经存在");
          return;
        }
        categorySearch.titleNotContainStr = [
          ...new Set(categorySearch.titleNotContainStr.concat(newList))
        ]
      }).catch((err) => {
        console.log(err)
      })
    },
    addContainName(categorySearch) {
      this.$prompt('对分类  [ ' + categorySearch.category + ' ] 下的商品添加必须包含的字符', '添加包含字符', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '支持一次输入多个例如:(平底锅,炒锅)'
      }).then(({value}) => {
        if (isNull(value)) {
          return;
        }
        let newList = value.split(/[,，]/)
            .map(item => item.trim())
            .filter(item => item !== '')
        let hasIntersection = categorySearch.titleContainStr.concat(categorySearch.titleNotContainStr).some(old => {
          old = old.toString()
          return newList.some(newStr => newStr === old || old.includes(newStr) || newStr.includes(old))
        })
        if (hasIntersection) {
          msg.warning("新增的字符已经存在");
          return;
        }
        categorySearch.titleContainStr = [
          ...new Set(categorySearch.titleContainStr.concat(newList))
        ]
      }).catch((err) => {
        console.log(err)
      })
    },
    addCategory() {
      let category = this.category.trim();
      if (!isNull(category)) {
        if (this.searchObjList.some(item => item.category === category)) {
          msg.warning("该品类已经存在")
          return;
        }
        this.searchObjList.push({
          category: category,
          minPrice1: 100, sortAmountTopR: 50, sortSearchPeopleTopR: 50,
          sortMinUVPrice: 3, sortMinPrice: 200,
          titleNotContainStr: [], titleContainStr: [], dateCycle: "7天"
        });
        this.category = "";
      }
    },
  }
}
</script>

<style scoped>
.label{
  color: #57606f;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.title{
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
</style>